<html>
    <head>
        <title>GeoExt Vector Legend</title>

        <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"></script>
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css" />
        <script src="http://www.openlayers.org/api/2.9/OpenLayers.js"></script>
        <script type="text/javascript" src="../lib/GeoExt.js"></script>

        <script type="text/javascript" src="vector-legend.js"></script>
        <style>
            #wrapper {
                position: relative;
            }
            #mappanel {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 512px;
                height: 256px;
            }
            #legend {
                position: absolute;
                top: 0px;
                left: 550px;
                height: 256px;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <h1>GeoExt.LegendPanel with Vector Layers</h1>
        <p>This example shows the how to create a legend for vector layers.  Zoom out to see how the legend is updated with changes in scale.<p>
        <p>The js is not minified so it is readable. See <a href="vector-legend.js">vector-legend.js</a>.</p>
        <div id="wrapper">
            <div id="mappanel"></div>
            <div id="legend"></div>
        </div>
    </body>
</html>
